<template>
  <div class="container">
  <el-row>
    <el-col :span="18">
      <div>
      <el-tag>病史内容:</el-tag>
        <el-button plain  :icon="iconTab" style="float: right;margin-right: 20px" @click="modelNameShowAndHide">快捷操作</el-button>
      </div>
      <div>
        <div>
          <el-form-item label="主诉："  class="outpatientCatalogInput" label-width="100px">
            <el-input type="textarea" :rows="1" resize="none" v-model="param.chiefComplaint"></el-input>
          </el-form-item>
          <el-form-item label="现病史" class="outpatientCatalogInput" label-width="100px">
            <el-input type="textarea" :rows="2" v-model="param.historyOfPresentIllness"></el-input>
          </el-form-item>
          <el-form-item label="现病治疗情况" class="outpatientCatalogInput" label-width="100px">
            <el-input type="textarea" :rows="1" resize="none" v-model="param.historyOfTreatment"></el-input>
          </el-form-item>
          <el-form-item label="既往史" class="outpatientCatalogInput" label-width="100px">
            <el-input type="textarea" :rows="2" v-model="param.pastHistory"></el-input>
          </el-form-item>
          <el-form-item label="过敏史" class="outpatientCatalogInput" label-width="100px">
            <el-input type="textarea" :rows="1" v-model="param.allergies"></el-input>
          </el-form-item>
          <el-form-item label="体格检查" class="outpatientCatalogInput" label-width="100px">
            <el-input type="textarea" :rows="2" v-model="param.healthCheckup"></el-input>
          </el-form-item>
          <el-form-item label="发病日期" class="outpatientCatalogInput" style="margin-top: 10px" label-width="100px">
            <el-date-picker type="date"  placeholder="选择日期" v-model="param.startDate"></el-date-picker>
          </el-form-item>
        </div>
        <div>
          <el-tag type="primary" round>评估诊断:</el-tag>
          <el-card>
            <el-button type="text" round style="float:right;" @click="drawer = true">添加诊断</el-button>
            <el-dialog title="病症模板" :visible.sync="drawer">
              <el-form-item label="病症名称:" style="margin-right: 10px" >
                <el-input  v-model="diseQueryParams.name" clearable size="mini" placeholder="输入关键字搜索"/>
                <el-button @click="getDiseList" icon="el-icon-search" size="mini" type="cyan">搜索</el-button>
                <el-button @click="diseRest" icon="el-icon-refresh" size="mini">重置</el-button>
              </el-form-item>
              <el-table :data="diseData" @row-click="diseDataTransfer">
                <el-table-column prop="icd" label="ICD编码"></el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="code" label="编码"></el-table-column>
              </el-table>
              <pagination
                v-show="total>0"
                :total="total"
                :page.sync="diseQueryParams.pageNum"
                :limit.sync="diseQueryParams.pageSize"
                @pagination="getDiseList"
              />
            </el-dialog>
            <el-table :data="param.assessmentData">
              <el-table-column prop="id" label="ID" v-if="idHid"></el-table-column>
              <el-table-column prop="icd" label="ICD编码"></el-table-column>
              <el-table-column prop="name" label="名称"></el-table-column>
              <el-table-column prop="code" label="编码"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-tag
                    type="primary"
                    size="mini"
                    icon="el-icon-delete"
                    @click="outDel(scope.$index,scope.row)">删除
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['dms:case_history:add']"
              style="float:right;"
            >保存修改</el-button>
          </el-card>
        </div>
      </div>
      <el-divider direction="vertical" class="el-divider--vertical"></el-divider>
    </el-col>

    <el-col :span="6">
      <div v-if="modelNameShowOrHide">
        <el-row>
          <el-tabs v-model="firstChoice">
            <el-tab-pane label="病例模板" name="outMedical">
              <div>
                <el-table :data="recordData" @row-click="handleShow" @row-dblclick="recordDataTransfer">
                  <el-table-column
                    prop="name"
                    label="病例名">
                  </el-table-column>
                  <el-table-column
                    prop="priliminaryDiseStrList"
                    label="主要诊断">
                  </el-table-column>
                </el-table>
                <el-form v-if="show">
                  <el-tag class="tagHeight">
                    <el-form-item :label="outModelTitle"></el-form-item>
                  </el-tag>
                  <el-form-item>
                    <el-input type="text" disabled v-model="chiefComplaint"></el-input>
                    <el-input type="text" disabled v-model="historyOfPresentIllness"></el-input>
                    <el-input type="text" disabled v-model="historyOfTreatment"></el-input>
                    <el-input type="text" disabled v-model="pastHistory"></el-input>
                    <el-input type="text" disabled v-model="allergies"></el-input>
                    <el-input type="text" disabled v-model="healthCheckup"></el-input>
                    <el-input type="text" disabled v-model="param.priliminaryDiseStrList"></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </el-tab-pane>
            <el-tab-pane label="常用就诊" name="judge">
              <div>
                <el-table :data="getMedicineListData" @row-dblclick="diseFrequentDataTransfer">
                  <el-table-column prop="name" label="名称"></el-table-column>
                  <el-table-column prop="code" label="编码"></el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
            <el-tab-pane label="历史病历" name="historyOut">
              <div>
                <el-table :data="historyOutPatientDataListen">
                  <el-table-column prop="chiefComplaint" label="历史症状"></el-table-column>
                  <el-table-column prop="healthCheckup" label="健康状态"></el-table-column>
                  <el-table-column prop="priliminaryDiseStrList" label="病症"></el-table-column>
                  <el-table-column prop="startDate" label="发病时间"></el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-row>
      </div>
    </el-col>
  </el-row>
  </div>
</template>

<script>
  import {
    getDise,
    getDms_case_model,
    getMedicineList,
    listDise,
    listDms_case_model,
    listPatient
  } from "@/api/dms/outpatient_page"

  export default {
    props:['historyOutPatientDataListen','param'],
    data(){
          return{
            /** 右侧表格显示隐藏*/
            modelNameShowOrHide:true,
            /** 图标切换*/
            iconTab:'el-icon-caret-right',
            getMedicineListData:[],
            idHid:false,
            //控制抽屉框的必要操作
            drawer:false,
            drawer1:false,
            //初始tab菜单位置
            firstChoice: 'outMedical',
            //病症抽屉框的搜索
            search: '',
            //病历模板表格数据
            recordData:[],
            //病历模板表单输入框数据
            outModelTitle: '',
            chiefComplaint : '',
            historyOfPresentIllness : '',
            historyOfTreatment : '',
            pastHistory : '',
            allergies :'',
            healthCheckup : '',
            //控制各种组件显隐
            show: false,
            //病症列表表格数据
            diseData:[],
            diseQueryParams:{
              name:null,
              pageNum: 1,
              pageSize: 7,
            },
            //分页操作
            queryParams: {
              pageNum: 1,
              pageSize: 7,
              status: null,
              name: null,
              aim: null,
              code: null,
              type: null,
            },
            total: 0,
            //病患信息数据
            pmsPatientData:[],
            //对应患者历史病历数据
            historyOutPatient:[]
          }
      },
      created() {
        this.getCaseModelList();
        this.getDiseList();
        this.getListPatient();
        this.getMedicineList();
      },
      watch:{
        "param.priliminaryDiseIdList":function () {
          this.param.assessmentData=[];
          if(this.param.priliminaryDiseIdList!=null){
              //整一个病症id的字符串
              let diseListId = this.param.priliminaryDiseIdList;
              //若有多个id，将字符串按照逗号分割
              let diseSplitList = diseListId.split(",");
              for(var i = 0;i < diseSplitList.length;i++){
                getDise(parseInt(diseSplitList[i])).then(response => {
                  this.param.assessmentData.push({
                    id: response.data.id,
                    icd: response.data.icd,
                    code: response.data.code,
                    name: response.data.name
                  });
                });
              }
          }
        },
        deep: true
      },
      methods:{
        /** modelNameShowAndHide数据表格显隐*/
        modelNameShowAndHide(){
          this.modelNameShowOrHide = !this.modelNameShowOrHide;
          this.iconTab = this.modelNameShowOrHide==true?'el-icon-caret-right':'el-icon-caret-left';
        },
        /**药品列表查询参数清空*/
        diseRest(){
          this.diseQueryParams= {
            name:null,
            code:null,
            pageNum: 1,
            pageSize: 7,
          };
          this.getDiseList();
        },
        getMedicineList(){
          this.loading = true;
          getMedicineList().then(response => {
            this.total = response.total;
            this.getMedicineListData = response.rows;
            this.loading = false;
          })
        },
        //获取病症集合并渲染到表格中
        getDiseList() {
          this.loading = true;
          listDise(this.diseQueryParams).then(response => {
            this.total = response.total;
            this.diseData = response.rows;
            this.loading = false;
          })

        },
        //获取病人信息
        getListPatient(){
          this.loading = true;
          listPatient(this.queryParams).then(response => {
            this.total = response.total;
            this.pmsPatientData = response.rows;
            this.loading = false;
          })
        },
        //病症模板数据集合
        getCaseModelList() {
          this.loading = true;
          listDms_case_model(this.queryParams).then(response => {
            this.total = response.total;
            this.recordData = response.rows;
            this.loading = false;
          })
        },

        //控制模板显隐
        handleShow(row) {
          this.show = true;
          const id = row.id || this.ids
          getDms_case_model(id).then(response => {
            this.outModelTitle = response.data.name;
            this.chiefComplaint = "主述:" + response.data.chiefComplaint;
            this.historyOfPresentIllness = "症状:" + response.data.historyOfPresentIllness;
            this.allergies = "过敏史:" + response.data.allergies;
            this.healthCheckup = "健康检查:" + response.data.healthCheckup;
            this.historyOfTreatment = "治疗情况:" + response.data.historyOfTreatment;
            this.param.priliminaryDiseStrList = "主要诊断:" + response.data.priliminaryDiseStrList;
            this.pastHistory = "既往史:" + response.data.pastHistory;
          });
        },
        diseDataTransfer(row,event,column) {
          this.$confirm('添加一条数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if(this.checkDiseData(row.icd)){
              getDise(row.id).then(response => {
                this.param.assessmentData.push({
                  id: response.data.id,
                  icd: response.data.icd,
                  code: response.data.code,
                  name: response.data.name
                });
                this.$message({
                  type: 'success',
                  message: '添加成功!'
                });
              })
            }else{
              this.$message({
                type:'warning',
                message:'已有此数据，不能重复添加！'
              })
            }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消添加'
            });
          });

        },
        checkDiseData(icd){
          let list = this.param.assessmentData;
          for(var i=0;i < list.length;i++){
            if(icd==list[i].icd){
              return false;
            }
          }
          return true;
        },
        outDel(index,row){
          this.$confirm('是否确认删除'+"'"+row.name+"'"+'此条数据?',"警告",{
            confirmButtonText:"确定",
            cancelButtonText:"取消",
            type:"warning"
          }).then(() =>{
            this.param.assessmentData.splice(index,1);
            this.msgSuccess("删除成功");
          })
        },
        recordDataTransfer(row){
          if(row.priliminaryDiseIdList!=null){
            //整一个病症id的字符串
            let diseListId = row.priliminaryDiseIdList;
            //若有多个id，将字符串按照逗号分割
            let diseSplitList = diseListId.split(",");
            for(var i = 0;i < diseSplitList.length;i++){
              getDise(parseInt(diseSplitList[i])).then(response => {
                this.param.assessmentData.push({
                  id: response.data.id,
                  icd: response.data.icd,
                  code: response.data.code,
                  name: response.data.name
                });
              });
            }
          }
          getDms_case_model(row.id).then(response => {
            this.param.chiefComplaint = response.data.chiefComplaint;
            this.param.historyOfPresentIllness = response.data.historyOfPresentIllness;
            this.param.historyOfTreatment = response.data.historyOfTreatment;
            this.param.pastHistory = response.data.pastHistory;
            this.param.allergies = response.data.allergies;
            this.param.healthCheckup =response.data.healthCheckup;
            /*this.date1 = response.data.*/
          })
        },
        //新增一条初诊病历信息
        handleAdd(){
          this.$emit("outPatientFormListen",[this.param,this.param.assessmentData]);
         /**/
        },
        diseFrequentDataTransfer(row){
          if(this.checkDiseData(row.icd)){
            getDise(row.id).then(response => {
              this.param.assessmentData.push({
                id: response.data.id,
                icd: response.data.icd,
                code: response.data.code,
                name: response.data.name
              });
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
            })
          }else{
            this.$message({
              type:'warning',
              message:'已有此数据，不能重复添加！'
            })
          }
        }
      }
    }
</script>

<style scoped>
  .outpatientCatalogInput{
    margin-bottom: 18px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width: 80%;
  }

  .container{
    padding:5px;
  }
  .tagHeight{
    height: 35px;
    line-height: 35px;
  }
  .el-input__inner{
    font-size: 14px;
  }
  /deep/ .el-card__body{
    padding: 0px 10px;
  }
</style>
